<template>
  <div class="cluster-container">
    <div class="cluster-header">
      <el-image
        style="width: 100px; height: 100px"
        :src="require('@/assets/header_images/tenantManage.png')"
      ></el-image>
      <div class="title">
        配额管理
        <div class="title-content">
          对多租户环境中不同租户进行资源隔离、权限控制、数据安全和个性化配置的统一管理
        </div>
      </div>
    </div>
    <div class="tenant-info">
      <div class="user-operate">
        <span class="keyword">关键词：</span>
        <el-input
          placeholder="请输入租户名、集群"
          style="width: 20%"
          clearable
          v-model="searchKeyword"
          @input="handleSearch"
        >
        </el-input>
      </div>
      <div class="tenant-table">
        <el-table
          ref="multipleTable"
          tooltip-effect="dark"
          style="width: 100%"
          :data="tableData"
          height="60vh"
        >
          <!--          :cell-style="{ textAlign: 'center' }"-->
          <!--          :header-cell-style="{ textAlign: 'center' }"-->
          <!--                  @selection-change="handleSelectionChange"-->
          <!--          <el-table-column type="selection" width="60rem"></el-table-column>-->
          <el-table-column prop="tenantName" label="租户名">
          </el-table-column>
          <el-table-column prop="clusterZhname" label="所属集群">
          </el-table-column>
          <el-table-column prop="tenantCpu" label="CPU配额(核)">
          </el-table-column>
          <el-table-column prop="tenantMem" label="内存配额(GB)">
            <template slot-scope="scope">
              <span v-if="(scope.row.tenantMem / 1024).toFixed(1).endsWith('0')">
                {{ scope.row.tenantMem / 1024 }}
              </span>
              <span v-else>
                {{ (scope.row.tenantMem / 1024).toFixed(1) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="创建时间">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="openShowTenantInfoDialog(scope.row)"
                         style="margin-right: 10px; padding: 0">
                查看
              </el-button>
              <el-button type="text" @click="openQuotaManageDialog(scope.row)" style="padding: 0;">
                配额管理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px; float: right">
          <el-Pagination
            background
            layout="total, prev, pager, next, jumper"
            :page-size="tenantPagination.pageSize"
            :total="tenantPagination.total"
            :current-page.sync="tenantPagination.pageNum"
            @current-change="handleTenantPageChange"
          />
        </div>
      </div>
    </div>
    <div v-if="dialogVisible">
      <el-dialog
        title="查看租户详情"
        :visible.sync="dialogVisible"
        width="50%"
        :destroy-on-close="true"
        :close-on-click-modal="false"
      >
        <show-tenant-info-dialog
          :tenant-id="tenantId"
        ></show-tenant-info-dialog>
        <span slot="footer" class="dialog-footer">
          <div style="width: 95%;">
            <el-button @click="dialogVisible = false"
                       type="primary"
                       class="el-button-primary-style"
            >关 闭</el-button>
          </div>
        </span>
      </el-dialog>
    </div>
    <div v-if="quotaManageDialogVisible">
      <el-dialog
        title="租户配额管理"
        :visible.sync="quotaManageDialogVisible"
        width="500px"
        :destroy-on-close="true"
        :close-on-click-modal="false"
      >
        <quota-manage-dialog
          :tenantInfo="selectTenantInfo"
          ref="quotaManageDialogRef"
        ></quota-manage-dialog>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import ShowTenantInfoDialog from "@/views/tenant-manage/ShowTenantInfoDialog.vue";
  import QuotaManageDialog from "@/views/tenant-manage/QuotaManageDialog.vue";

  export default {
    name: "QuotaManage",
    components: {QuotaManageDialog, ShowTenantInfoDialog},
    data() {
      return {
        searchKeyword: "",
        tableData: [],
        // 租户分页信息
        tenantPagination: {
          total: 0,
          pageNum: 1,
          pageSize: 10,
        },
        dialogVisible: false,
        tenantId: "",
        quotaManageDialogVisible: false,
        selectTenantInfo: {},
      };
    },
    methods: {
      // 搜索功能函数
      handleSearch() {
        this.tenantPagination.pageNum = 1; // 搜索时重置页码
        this.fetchTenantData();
      },
      // 分页获取租户数据
      fetchTenantData() {
        this.$tenantManageApi
          .pageGetTenantInfo({
            filterKey: this.searchKeyword,
            pageSize: this.tenantPagination.pageSize,
            pageNum: this.tenantPagination.pageNum,
          })
          .then((response) => {
            this.tableData = response.data.records;
            // 更新分页信息
            this.tenantPagination.total = response.data.total;
            this.tenantPagination.pageSize = response.data.size;
          })
          .catch((error) => {
            console.error(error);
          });
      },
      handleTenantPageChange(pageNum) {
        this.tenantPagination.pageNum = pageNum;
        this.fetchTenantData();
      },
      openShowTenantInfoDialog(row) {
        this.dialogVisible = true;
        this.tenantId = row.id;
      },
      openQuotaManageDialog(row) {
        this.quotaManageDialogVisible = true;
        this.selectTenantInfo = row;
        this.$nextTick(() => {
          if (this.$refs.quotaManageDialogRef !== undefined) {
            this.$refs.quotaManageDialogRef.$on(
              "editQuotaManage",
              this.closeQuotaManageDialog
            );
          }
        });
      },
      closeQuotaManageDialog(operate, tenant) {
        if (operate === "edit") {
          console.log(tenant);
          this.$tenantManageApi.updateResourceTenant(tenant).then((res) => {
            if (res && res.code === 200) {
              this.quotaManageDialogVisible = false;
              this.$refs.quotaManageDialogRef.$off("editQuotaManage");
              this.$message.success(res.data);
              this.fetchTenantData();
            }
          });
        } else if (operate === "close") {
          this.quotaManageDialogVisible = false;
        }
      },
    },
    //在mounted中进行异步操作使用nextTick，不然mounted中会因为组件未完全渲染就已经执行操作而报错
    mounted() {
      this.$nextTick(() => {
        this.fetchTenantData();
      });
    },
  };
</script>

<style scoped>

  .tenant-info {
    margin-top: 10px;
  }

  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #304156;
  }

  .user-operate {
    background-color: #f9fbfd;
    padding: 10px 0;
  }
</style>
